<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.bigbox{
				/* 把父盒子设置为flex容器 */
				display: flex;
				/* 改变主轴 -- flex-direction：；
					row : 水平，从左往右
					row-reverse：从右往左
					column: 垂直，从上往下
					column-reverse: 从下往上
				 */
				/* flex-direction: row; */
				
				/* 换行 -- flex-wrap： ；
					nowraw:不换行
					wrap:换行
					wrap-reverse:反转换行
				 */
				/* flex-wrap: row-reverse; */
				/* 复合写法 --flex-flow：；*/
				flex-flow: row wrap;
				/* 
				决定项目在主轴的对齐方式:--justify-content： ；
					flex-start: 沿主轴的开始位置对齐，默认值
					flex-end:沿主轴的结束位置对齐
					center:居中
					space-between:两端对齐
					space-around:环绕对齐/拉手对齐
				*/
				justify-content: space-between;
				
				/* 决定项目在交叉轴上的对齐方式--  align-item: ;
					flex-start:在交叉轴的开始位置
					flex-end:在交叉轴的j结束位置
					center:居中
				 */
				align-items: center; 
				
				/* 多条轴线的对齐方式 --align-content: ;
				flex-start:沿交叉轴的开始位置对齐
				flex-end: 沿交叉轴的结束位置对齐
				center:垂直居中
				space-between:沿交叉轴的两端对齐
				space-around:沿交叉轴的环绕对齐
				 */
				align-content:space-between;
				width: 700px;
				height: 700px;
				border: 1px solid black;
				margin: auto;
			}
			.bigbox div{
				width: 200px;
				height: 300px;
				border: 1px solid red;
				text-align: center;
				font-size: 34px;
				line-height: 300px;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</body>
</html>
